<template>
	<view class="user-page">
		<!-- 用户信息的头部-开始 -->
		<view class="user-header">
			<view class="header-userinfo">
				<view class="userinfo-left">
					<!-- 用户的头像-开始 -->
					<view class="left-img">
						<image src="../../static/6.png" mode=""></image>
					</view>
					<!-- 用户的头像-结束 -->

					<!-- 用户的个人信息-登录操作-开始 -->
					<view class="left-text">
						<view class="text">
							<text>未登录</text>
							<text>ID：158764</text>
						</view>
						<view class="tag">
							优秀博主
						</view>
					</view>
					<!-- 用户的个人信息-登录操作-结束 -->
				</view>
				<view class="userinfo-right">
					<text>个人资料</text>
				</view>
			</view>
			<view class="header-tools">
				<view class="header-tools-item" v-for="(item,index) in toolsList" :key="index">
					<text>{{item.value}}</text>
					<text>{{item.name}}</text>
				</view>
				<!-- <view class="header-tools-item">
					<text>0</text>
					<text>我的粉丝</text>
				</view>
				<view class="header-tools-item">
					<text>0</text>
					<text>我的关注</text>
				</view> -->
			</view>
		</view>
		<!-- 用户信息的头部-开始 -->

		<view class="user-content">
			<!-- 个人中心菜单列表-开始 -->
			<view class="tools-list">
				<view class="tools-list-item" v-for="(item,index) in shangpin" :key="index">
					<view class="item-left">
						<image class="item-left-icon" :src="item.img" mode=""></image>
						<text>{{item.name}}</text>
					</view>
					<view class="item-right">
>
					</view>
				</view>
			</view>
			<!-- 个人中心菜单列表-结束 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				toolsList: [{
					name: "我的文章",
					value: 0
				}, {
					name: "我的粉丝",
					value: 0
				}, {
					name: "我的关注",
					value: 0
				},],
				shangpin: [{
					img:"../../static/1.png",
					name: "商品管理",
					value: 0
				}, {
					
				img:"../../static/2.png",
					name: "账号认证",
					value: 0
				},{img:"../../static/3.png",
					name: "推广有礼",
					value: 0
				},{img:"../../static/4.png",
					name: "意见反馈",
					value: 0
				}, {img:"../../static/5.png",
					name: "联系我们",
					value: 0
				},],
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.user-page {
		.user-header {
			display: block;
			padding: 12px;
		}

		.header-userinfo {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.userinfo-left {
			display: flex;
			align-items: center;
		}

		.left-text {
			display: flex;
			align-items: center;
			padding-left: 16px;

			text {
				display: block;
			}

			.tag {
				border: 1px solid blueviolet;
				border-radius: 8px;
				font-size: 12px;
				padding: 2px;
				color: blueviolet;
			}
		}

		.left-img {
			width: 48px;
			height: 48px;
			border-radius: 50%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.header-tools {
		width: 100%;
		display: flex;
		padding: 12px 0;

		.header-tools-item {
			flex: 1;
			text-align: center;
		}

		.header-tools-item text {
			display: block;
		}
	}

	.tools-list {
		padding: 12px;

		.tools-list-item {
			height: 56px;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item-left {
				display: flex;
				align-items: center;
			}

			.item-left-icon {
				width: 24px;
				height: 24px;
				padding-right: 8px;
			}
		}
	}
</style>